<template>
  <van-tabbar v-model="active">
    <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item>

    <van-tabbar-item replace to="/worth" icon="balance-o">值得买</van-tabbar-item>

    <van-tabbar-item replace to="/shopcart" icon="shopping-cart-o">购物车</van-tabbar-item>
    <van-tabbar-item replace to="/center" icon="user-circle-o">个人中心</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      shopNum: 0,
    };
  },
  mounted() {
    this.$bus.$on("shopNum", (shopNum) => {
      this.shopNum = shopNum;
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
